<!DOCTYPE html>
<html lang="en" ng-app="recipes">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="sm/sm.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<style>
    .item-media img{
        max-width: 100%;
    }
    .card-header{
        font-size: 0.9rem;
    }
    .card-content-inner{
        padding:0.5rem !important;
        text-indent: 2em;
        font-size: 14px !important;
    }
</style>
<body  style="background: #ffffff !important;">
<div class="page-group">
    <div class="page" id="page-pre" ng-controller="recipesDetail"  >
        <header class="bar bar-nav to-padding-top">
            <a class="icon icon-left pull-left" href="javascript:app.backLastPosition();"></a>
            <p class="title">常识详情</p>
        </header>

        </nav>
        <div class="content pull-to-refresh-content">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>

            <div class="card">
                <div class="card-header">{{recipes.title}}</div>
                <div class="card-content">
                    <div class="list-block media-list">
                        <div class="card-content-inner" ng-if="recipes.content.split('@')[0]">{{recipes.content.split('@')[0]}}</div>
                        <div class="item-media" ng-if="recipes.img.split(',')[0]"> <img  ng-src="{{recipes.img.split(',')[0]}}"></div>
                        <div class="card-content-inner" ng-if="recipes.content.split('@')[1]">{{recipes.content.split('@')[1]}}</div>
                        <div class="item-media" ng-if="recipes.img.split(',')[1]"><img ng-src="{{recipes.img.split(',')[1]}}"></div>
                        <div class="card-content-inner" ng-if="recipes.content.split('@')[2]">{{recipes.content.split('@')[2]}}</div>
                        <div class="item-media" ng-if="recipes.img.split(',')[2]"><img  ng-src="{{recipes.img.split(',')[2]}}"></div>
                        <div class="card-content-inner" ng-if="recipes.content.split('@')[3]">{{recipes.content.split('@')[3]}}</div>
                        <div class="card-content-inner" ng-if="recipes.content.split('@')[4]">{{recipes.content.split('@')[4]}}</div>
                    </div>
                </div>
                <div class="card-footer">
                    <span  class="color-gray">{{recipes.origin}}</span>
                    <span  class="color-gray">{{recipes.time}}</span>

                </div>
            </div>

        </div>
    </div>
    <script src="js/angular.js"></script>
    <script src="sm/zepto.min.js"></script>
    <script>$.config = {router: false}</script>
    <script src="sm/sm.min.js"></script>
    <link rel="stylesheet" href="sm/sm-extend.min.css">
    <script type='text/javascript' src='sm/sm-extend.min.js' charset='utf-8'></script>
    <link rel="stylesheet" href="css/group-detail.css">
    <script src="controller/app-init-func.js"></script>
    <script src="controller/recipes-content.js"></script>

</div>
<script>app.suiInit();
$(document).on('refresh', '.pull-to-refresh-content', function(e) {
    Zepto.toast("正在刷新");
    setTimeout(function() {

        Zepto.pullToRefreshDone('.pull-to-refresh-content');

    }, 2000);

});
</script>
</body>
</html>